<template>
	<view class="index" :style="[pageStyle]" :class="themeName">
		<!-- <view class="">
			appConfig.pop_agreement{{ appConfig.pop_agreement }}
		</view> -->
		<bubble top="300rpx" :page="1" :discharge="isDischarge"></bubble>
		<!-- 首页所有组件 -->
		<lazy-component v-for="(item, index) in pagesData" :key="index">
			<view>
				<template v-if="item.name == 'search' && item.show">
					<div style="display: flex;width: 100%;align-items: center;padding: 0 0 0 10px;box-sizing: border-box;">
						<img style="width: 146rpx;height: 46rpx;" src="@/static/images/logo.png" alt="logo">
						<w-search class="search" style="flex: 1;" :content="item.content" :styles="item.styles" />
					</div>
				</template>
				<template v-else-if="item.name == 'navigation' && item.show">
					<w-navigation :content="item.content" :styles="item.styles" />
				</template>
				<template v-else-if="item.name == 'banner' && item.show">
					<w-banner :content="item.content" :styles="item.styles" />
				</template>
				<template v-else-if="item.name == 'title' && item.show">
					<w-title :content="item.content" :styles="item.styles" />
				</template>
				<template v-else-if="item.name == 'rubik' && item.show">
					<w-rubik :content="item.content" :styles="item.styles" />
				</template>
				<template v-else-if="item.name == 'region' && item.show">
					<w-region></w-region>
				</template>
				<template v-else-if="item.name == 'notice' && item.show">
					<w-notice :content="item.content" :styles="item.styles" />
				</template>
				<template v-else-if="item.name == 'blank' && item.show">
					<w-blank :content="item.content" :styles="item.styles" />
				</template>
				<template v-else-if="item.name == 'separate' && item.show">
					<w-separate :content="item.content" :styles="item.styles" />
				</template>
				<template v-else-if="item.name == 'goodsgroup' && item.show">
					<w-goodsgroup :content="item.content" :styles="item.styles" />
				</template>
				<template v-else-if="item.name == 'tabs' && item.show">
					<w-tabs :content="item.content" :styles="item.styles" />
				</template>
				<template v-else-if="item.name == 'coupon' && item.show">
					<w-coupon :content="item.content" :styles="item.styles" @refresh="getPageInfo" />
				</template>
				<template v-else-if="item.name == 'seckill' && item.show">
					<w-seckill :content="item.content" :styles="item.styles" />
				</template>
				<template v-else-if="item.name == 'spellgroup' && item.show">
					<w-spellgroup :content="item.content" :styles="item.styles" />
				</template>
				<template v-else-if="item.name == 'video' && item.show">
					<w-video :content="item.content" :styles="item.styles" />
				</template>
				<template v-else-if="item.name == 'graphic' && item.show">
					<w-graphic :content="item.content" :styles="item.styles" />
				</template>
				<!-- #ifdef MP-WEIXIN -->
				<template v-else-if="item.name == 'mnplive' && item.show">
					<w-mnplive :content="item.content" :styles="item.styles" />
				</template>
				<!-- #endif -->
			</view>
			<view slot="skeleton" style="height: 20vh"></view>
		</lazy-component>
		<!-- #ifndef APP-PLUS -->
		<tabbar />
		<!-- #endif -->
		<!-- #ifdef APP-PLUS -->
		<tabbar v-show="showTabbar" />
		<!-- #endif -->
		<index-skeleton v-show="loading" />
		<u-back-top :scroll-top="scrollTop" :top="1000"
			:customStyle="{ backgroundColor: '#FFF', color: '#000', boxShadow: '0px 3px 6px rgba(0, 0, 0, 0.1)' }">
		</u-back-top>

		<!-- #ifdef APP-PLUS -->
		<!-- <lyg-popup v-if="appConfig.pop_agreement" title="服务协议与隐私政策"
			protocolPath='/bundle/pages/server_explan/server_explan?type=1'
			policyPath='/bundle/pages/server_explan/server_explan?type=2' :policyStorageKey="policyStorageKey" :showTabbar.sync="showTabbar">
		</lyg-popup> -->
		<!-- #endif -->
	</view>
</template>
<script>
import {
	apiIndex,
	apiBanner
} from '@/api/store'
import {
	apiVisit
} from '@/api/app'
export default {
	data() {
		return {
			// 轮播图
			isDischarge: false,
			styles: {},
			pagesData: [],
			loading: true,
			scrollTop: 0,
			policyStorageKey: 'had_read_privacy', // 保存是否同意协议缓存信息的key
			showTabbar: true, // 是否展示tabbar。 在app端&开启了强制弹窗同意协议，需同意才展示tabbar
		}
	},

	methods: {
		getPageInfo() {
			apiIndex().then(res => {
				const {
					common: {
						title
					},
					common,
					content
				} = res

				uni.setNavigationBarTitle({
					title
				});
				this.styles = common
				this.tempData = content.map((item, index) => {
					return {
						index,
						value: item
					}
				})
				this.splitSetData()

			}).finally(() => {
				uni.stopPullDownRefresh()
				this.loading = false
			})
		},
		splitSetData() {
			const item = this.tempData.shift()
			if (!item) {
				// 按下标位置追加自定义组件
				this.$set(this.pagesData, 5, {
					name: 'region',
					show: true
				})
				return
			}

			if (item.value.name === 'banner') {
				// 情况默认轮播图
				this.$set(this.pagesData, this.pagesData.length, [])
			} else {
				this.$set(this.pagesData, item.index, Object.freeze(item.value))
			}

			setTimeout(() => {
				this.splitSetData()
			}, 100)
		},
		
		// 请求轮播图方法
		getBanner() {
			apiBanner().then(res => {
				if (res.code === 1 && res.data.length) {
					// res.data数据结果参考this.pagesData里面的banner
					// 赋值渲染
					this.$set(this.pagesData, 1, res.data)
				}
			})
		}
	},
	computed: {
		pageStyle() {
			const {
				background_color,
				background_image,
				background_type,
			} = this.styles
			if (background_type == 0) return
			const style = background_type == 1 ? {
				'background-color': background_color
			} : {
				'background-image': `url(${background_image})`
			}
			return style
		},

		// // #ifdef APP-PLUS
		// // 是否展示tabbar。 在app端&开启了强制弹窗同意协议，需同意才展示tabbar
		// showTabbar() {
		// 	let isShow = false
		// 	return uni.getStorageSync(this.policyStorageKey);
		// },
		// // #endif
	},
	onPullDownRefresh() {
		this.getPageInfo()
	},
	onPageScroll(e) {
		const {
			scrollTop
		} = e
		this.scrollTop = scrollTop
	},
	onLoad() {
		this.getPageInfo()
		// 请求轮播图
		this.getBanner()
		// 访客记录
		apiVisit()
	},
	onHide() {
		this.isDischarge = true;
	},
	onShow() {
		this.isDischarge = false;
		// #ifdef MP
		wx.getUpdateManager().onUpdateReady(function () {
			wx.showModal({
				title: '更新提示',
				content: '新版本已经准备好，是否重启应用？',
				success(res) {
					if (res.confirm) {
						// 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
						wx.getUpdateManager().applyUpdate()
					}
				}
			})
		})
		// #endif
	},
	watch: {

	}
}
</script>

<style lang="scss">
.index {
	position: relative;
	background-repeat: no-repeat;
	background-size: 100% auto;
	overflow: hidden;
	min-height: calc(100vh - env(safe-area-inset-bottom));
}
</style>
